const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

// Progress是webpack内置的插件，是不需要额外下载的
const { ProgressPlugin, ProvidePlugin } = require("webpack")

module.exports = {
    entry: {
        // 注意，书写的位置发生变化，那么地址也需要发生变化，根据位置来确定地址
        // 把第三方包从业务代码里面抽离出来，方便后面对第三方包做优化
        chunk: ["react", "react-dom/client"],
        app: {
            // import是指定代码入口
            import: path.resolve(__dirname, '../src/main.js'),
            // 业务代码依赖第三方包
            dependOn: "chunk"
        }
    },
    output: {
        path: path.resolve(__dirname, '../', 'dist'),
        filename: 'js/[name].[chunkhash:8].js',
        clean: true, //每次build打包，都将之前的打包文件删除
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // template: './public/index.html'
            // 可以使用绝对路径进行配置
            template: path.resolve(__dirname, "../", "public/index.html"),
            // 上面配置的文件是在head中，如果想要在body那出现这个js的压缩文件
            inject: "body",
            filename: "index.html",
            title: "vue-element-admin", //显示页面的标题
            favicon: path.resolve(__dirname, "../", "public/aaa.ico")
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                // console.log(percentage);这个就是进度
                if (percentage === 1) {
                    console.log("100% 打包/启动成功~");
                } else {
                    console.log(`${Math.floor(percentage*100)}%正在打包`);
                }
            }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js")
        })
    ],
    // module就是模块的意思，在webpack眼中，一切都是模块
    // 在module中配置的rules就是给那些打包的模块来进行规则验证,根据已经下载好的loader来进行加载
    // 从而使得这些模块可以正常使用
    module: {
        rules: [
            // 当webpack工作时，遇到以.js结尾的模块，使用babel-loader进行加载
            // 加载完成后交给@babel/** 进行编译转化，转化成es5代码
            // 但是，还是可能发生错误，这种情况下你就需要合适的loader来进行加载，处理这个文件
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader" },
            // 当webpack开始工作，遇到以css结尾的模块时，加载并解析返回css代码  查到head标签内，以内部样式的方法
            // loader的使用时从后往前的，如果时用scss写的，那么先是哦也能够sass-loader翻译成css
            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] },

            // 由于es6的语法非常多，所以babel将所有可能要用的插件进行一个预设，预设就是插件的集合
            // 当然，预设也并不是说将所有的语法都能解决，遇到特殊的，还是要单独下载

            // 在webpack4中又两种方式可以处理图片这种资源，但是在webpack5中就已经被放弃了，但是还可以用
            // 一种是file-loader 一种是url-loader  $是以什么结尾的意思,比如说以jpg为结尾的模块文件
            // file-loader不管是在开发服务器上,还是在硬盘上打包,它的前面都会加一堆hash值
            // { test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use: "file-loader" },
            // 使用url-loader在硬盘上打包不会产生新文件,但是在js的app.js文件中产生一堆乱码
            // 在开发服务器中打包也只会产生乱码
            // { test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use: "url-loader" },


            // 但是在webpack5中已经放弃了这种写法,使用type:'asset/resource' 相当于使用了file-loader
            {
                test: /\.(png|jpg|svg|gif|jpeg|webp)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            //配置解析路径
            "@": path.resolve(__dirname, "../", "src")
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
}